'use client';

import { motion } from 'framer-motion';
import { ReactNode } from 'react';

/**
 * AnimatedSection Component
 * Provides consistent animation effects for page sections
 */
export default function AnimatedSection({
  children,
  className = '',
  ...props
}: {
  children: ReactNode;
  className?: string;
  [key: string]: unknown;
}) {

  const staggerContainer = {
    animate: {
      transition: {
        staggerChildren: 0.15,
      },
    },
  };

  return (
    <motion.section
      initial="initial"
      whileInView="animate"
      viewport={{ once: true }}
      variants={staggerContainer}
      className={`section-padding ${className}`}
      {...props}
    >
      {children}
    </motion.section>
  );
}

/**
 * AnimatedElement Component
 * Provides consistent animation effects for individual elements
 */
export function AnimatedElement({
  children,
  className = '',
  variant = 'fadeInUp',
  ...props
}: {
  children: ReactNode;
  className?: string;
  variant?: string;
  [key: string]: unknown;
}) {
  const variants = {
    fadeInUp: {
      initial: { opacity: 0, y: 30 },
      animate: { opacity: 1, y: 0 },
      transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
    },
    fadeIn: {
      initial: { opacity: 0 },
      animate: { opacity: 1 },
      transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
    },
    slideInLeft: {
      initial: { opacity: 0, x: -30 },
      animate: { opacity: 1, x: 0 },
      transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
    },
    slideInRight: {
      initial: { opacity: 0, x: 30 },
      animate: { opacity: 1, x: 0 },
      transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
    },
  };

  return (
    <motion.div
      variants={variants[variant as keyof typeof variants] || variants.fadeInUp}
      className={className}
      {...props}
    >
      {children}
    </motion.div>
  );
}